Skip to content

London | 26-ITP-May | Bisrat Tesfay | Sprint 1 | Form controls#1271

Open
B3-Bisrat wants to merge 2 commits into
CodeYourFuture:mainfrom
B3-Bisrat:MODULE-ONBOARDING-B1
Open

London | 26-ITP-May | Bisrat Tesfay | Sprint 1 | Form controls#1271
B3-Bisrat wants to merge 2 commits into
CodeYourFuture:mainfrom
B3-Bisrat:MODULE-ONBOARDING-B1

Conversation

@B3-Bisrat
Copy link
Copy Markdown

@B3-Bisrat B3-Bisrat commented May 14, 2026

Learners, PR Template

Self checklist

  • I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
  • My changes meet the requirements of the task
  • I have tested my changes
  • My changes follow the style guide

Changelist

Created a T-shirt order form using only HTML and CSS. Added semantic form elements, validation for required fields and email input, color and size selection options, and styled the page with CSS for a cleaner and more professional layout.

Questions

No questions at the moment.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 14, 2026

Deploy Preview for cyf-onboarding-module ready!

Name Link
🔨 Latest commit e14c695
🔍 Latest deploy log https://app.netlify.com/projects/cyf-onboarding-module/deploys/6a0b7bcfc6d6720008a63101
😎 Deploy Preview https://deploy-preview-1271--cyf-onboarding-module.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
2 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 86 (no change from production)
PWA: -
View the detailed breakdown and full score reports
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions

This comment has been minimized.

@B3-Bisrat B3-Bisrat added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 14, 2026
@github-actions

This comment has been minimized.

@github-actions github-actions Bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 14, 2026
@B3-Bisrat B3-Bisrat added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 15, 2026
@github-actions

This comment has been minimized.

@github-actions github-actions Bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 15, 2026
@B3-Bisrat B3-Bisrat added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 15, 2026
@github-actions

This comment has been minimized.

@github-actions github-actions Bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 15, 2026
@B3-Bisrat B3-Bisrat changed the title London | 26-ITP-May | Bisrat Tesfay | sprint 1 | Form control London | 26-ITP-May | Bisrat Tesfay | Sprint 1 | Form controls May 16, 2026
@B3-Bisrat B3-Bisrat added 📅 Sprint 1 Assigned during Sprint 1 of this module Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels May 16, 2026
@Luro91 Luro91 added the Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. label May 18, 2026
Comment thread Form-Controls/index.html Outdated
Comment on lines +27 to +57
<select name="color" id="color">
<option value="white">White</option>
<option value="black">Black</option>
<option value="blue">Burgundy</option>
</select>
</div>
<div>
<p>Choose a size:</p>
<label>
<INPUT type="radio" id="xs" name="size" value="XS" required>
XS
</label>
<LABel>
<INPUT type="radio" id="s" name="size" value="S">
S
</LABel>
<label>
<INPUT type="radio" id="m" name="size" value="M">
M
</label>
<label>
<INPUT type="radio" id="l" name="size" value="L">
L
</label>
<label>
<INPUT type="radio" id="xl" name="size" value="XL">
XL
</label>
<label>
<INPUT type="radio" id="xxl" name="size" value="XXL">
XXL
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A note on the input types. I would use radio buttons for the colors and a drop down for the t shirt sizes. Radio buttons require more space so often it is better to use radio buttons if there are not to many options. (Just fyi. You don't need to change it)

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the feedback and explanation. That makes sense, especially about using radio buttons when there are fewer options. I’ll keep that in mind for future forms and projects.

Comment thread Form-Controls/index.html Outdated
<div>
<p>Choose a size:</p>
<label>
<INPUT type="radio" id="xs" name="size" value="XS" required>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is the INPUT capitalized?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, I didn’t notice that. I’ll change it to lowercase for consistency and better formatting. Thank you for pointing it out.

Comment thread Form-Controls/index.html Outdated
<INPUT type="radio" id="xs" name="size" value="XS" required>
XS
</label>
<LABel>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The casing looks strange to me. How can you ensure consistent formatting in your code automatically?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the feedback. I think using a formatter like Prettier in VS Code would help keep my HTML formatting and casing consistent automatically. I’ll start using that moving forward. I also wanted to practice writing and formatting the code manually first so I could become more familiar with the syntax and remember it better.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes Prettier is a great tool for formatting the code automatically. You can make it a habbit to run it before committing the code (and at some point configure it to run automatically when you save a file)

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, that’s really helpful advice.

@Luro91 Luro91 added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. labels May 18, 2026
@B3-Bisrat B3-Bisrat added Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. and removed Reviewed Volunteer to add when completing a review with trainee action still to take. labels May 18, 2026
@Luro91 Luro91 added Complete Volunteer to add when work is complete and all review comments have been addressed. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels May 20, 2026
Copy link
Copy Markdown

@Luro91 Luro91 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done the code works as expected and is nicely formatted now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Complete Volunteer to add when work is complete and all review comments have been addressed. 📅 Sprint 1 Assigned during Sprint 1 of this module

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants